<template>
	<view  >


		<view class="uni-popup-dialog">
			<view class="uni-dialog-title">
				<text class="v-text f-20 f-w-800 p-20" style="color: #000;">更新应用</text>
			</view>


			<view class="banmi_flex j-s " style="padding-right: 50px;padding-left: 40px;">
				<view class="">
					<text class="cf_7d">当前版本</text><text class="w800 ml1"
						style="color: #228B22;">v{{find.version}}</text>
				</view>
				<view class="">
					<text class="cf_7d">正在更新版本</text><text class="w800 ml1"
						style="color: #228B22;">v{{find.up_version}}</text>
				</view>
			</view>
			<view class="p-20" style="padding-bottom:0px;">
				<template v-if="log=='正在下载'">
					<view class="p-20 banmi_flex j-c f-w-800" style="color: #409eff;">
						{{log}}
					</view>
					<view class="banmi_flex j-c" style="width: 100%">
						<ProgressBar :size="size" :issize="down_size" :percentage="percentage" Type="aqua"
							:Vice="false">
						</ProgressBar>
					</view>
					<view class="p-20 banmi_flex j-c cred f-w-800  p-t-3" style="padding-bottom: 100px;">
						请勿关闭此窗口
					</view>
				</template>
				<template v-else>
					<view class="p-20 banmi_flex j-c f-w-800" style="color: #409eff;padding-bottom: 50px;">
						{{log}}
					</view>
				</template>
			</view>
			<view v-if="log!='正在下载'" class="banmi_flex p-b-20 j-s">
				<view @click="close" class="banmi_bt_1 banmi_flex j-c a-c"
					style="width: 200rpx;height: 30px;background-color: #C0C0C0;">
					<text>关闭</text>
				</view>
				<view @click="on_update" class="banmi_bt_1 banmi_flex j-c a-c" style="width: 200rpx;height: 30px;">
					<text>确认更新</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import popup from '../uni-popup/popup.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {
		t
	} = initVueI18n(messages)
	/**
	 * PopUp 弹出层-对话框样式
	 * @description 弹出层-对话框样式
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} value input 模式下的默认值
	 * @property {String} placeholder input 模式下输入提示
	 * @property {String} type = [success|warning|info|error] 主题样式
	 *  @value success 成功
	 * 	@value warning 提示
	 * 	@value info 消息
	 * 	@value error 错误
	 * @property {String} mode = [base|input] 模式、
	 * 	@value base 基础对话框
	 * 	@value input 可输入对话框
	 * @property {String} content 对话框内容
	 * @property {Boolean} beforeClose 是否拦截取消事件
	 * @event {Function} confirm 点击确认按钮触发
	 * @event {Function} close 点击取消按钮触发
	 */
	import ProgressBar from '@/components/ai-progress/ai-progress.vue';

	export default {
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		components: {

			ProgressBar,

		},
		props: {
			find: {
				type: Object,
				default () {
					return {};
				}
			},
			plugin: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		data() {
			return {
				dialogType: 'error',
				focus: false,
				text: '',
				is_up: false,
				log: '',
				system_version: '',
				size: 20, //总大小mb
				down_size: 0, //已下载多少mb
				percentage: 0, //下载进度
			}
		},
		computed: {

			okText() {
				return this.confirmText || t("uni-popup.ok")
			},
			closeText() {
				return this.cancelText || t("uni-popup.cancel")
			},
			placeholderText() {
				return this.placeholder || t("uni-popup.placeholder")
			},
			titleText() {
				return this.title || t("uni-popup.title")
			}
		},

		created() {

			this.popup.disableMask()
			// this.popup.closeMask()
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
		},
		mounted() {
			this.plugin_id = this.plugin.id,
				this.catalogue = this.plugin.catalogue

			this.focus = true

		},
		methods: {
			on_update() {

				this.log = '正在下载'
				var that = this;
				var data = {
					version_log_id: this.find.id,
					plugin_id: this.plugin.id,
					plugin_ttkey: this.find.ttkey,
					plugin_t: this.find.t,
					plugin_sign: this.find.sign,
				}
				this.Banmikeji.upgrade_api(data).then(ret => {
					if (ret.status == 200) {
						that.task_id = ret.data.task_id;
						that.part_num = ret.data.part_num;
						that.size1 = ret.data.size;
						var size = ret.data.size / 1024 / 1024;
						that.size = size.toFixed(2)
						that.part_down(0);
					} else {
						this.log = '提示'
						this.title = '提示';
						this.msg = ret.msg
						uni.showToast({
							title: ret.msg,
							icon: 'none'
						})
					}
				})
			},
			async part_down(i) {

				let that = this;
				var data = {
					task_id: this.task_id,
					part_i: i,
					catalogue: this.catalogue,
					plugin_id: this.plugin_id,
					plugin_ttkey: this.find.ttkey,
					plugin_t: this.find.t,
					plugin_sign: this.find.sign,
				}
				const ret = await this.Banmikeji.plugin_part_down(data);
				if (that.part_num - 1 > i) {
					this.down_size = i + 'mb';
					var down_size = i * 1024 * 1024;
					this.percentage = down_size / Number(that.size1) * 100;
					this.part_down(i + 1);
				} else {
					this.down_size = i + 'mb';
					this.percentage = 98;
					setTimeout(function() {
						that.part_merge();
					}, 500);

				}

			},
			async part_merge() {
				var data = {
					task_id: '',
					part_i: '',
					catalogue: this.catalogue,
					plugin_id: this.plugin_id,
					version_log_id: this.find.up_version,
					plugin_ttkey: this.find.ttkey,
					plugin_t: this.find.t,
					plugin_sign: this.find.sign,

				}
				const ret = await this.Banmikeji.plugin_part_merge(data);
				this.log = ret.msg
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				if (ret.status == 200) {
					console.log("222: " + JSON.stringify(222));
					this.$emit('ok', this.find.version)
					this.close();
				}

			},


			/**
			 * 点击取消按钮
			 */
			closeDialog() {
				this.$emit('close')
				if (this.beforeClose) return
				this.popup.close()
			},
			close() {
				console.log("333: " + JSON.stringify(333));
				this.popup.close()
			}
		}
	}
</script>


<style lang="scss">
	.classify-liv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #FD9A01;
		text-align: center;
		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.classify-lixzlv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #999;

		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.uni-popup-dialog {
		width: 600px;
		border-radius: 11px;

		background-color: #fff;
	}

	.uni-dialog-title {
		display: flex;
		banmi_flex-direction: row;
		justify-content: center;
		padding: 20px 0;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: banmi_flex;
		/* #endif */
		banmi_flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.f20 {
		font-size: 24px;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: banmi_flex;
		/* #endif */
		banmi_flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: banmi_flex;
		/* #endif */

		banmi_flex: 1;
		banmi_flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}

	.uni-dialog-input {
		banmi_flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}
</style>